import themeDarkConfig from '@/styles/json/dark.json';
import themeLightConfig from '@/styles/json/light.json';
import { changeColorOpacity } from '@/utils/common';
import themeStore from '@/stores/theme';
/**主题前缀 */
export const keyThemePrefix = 'theme_';
/**主题模式 枚举 */
export const enum themeModeEnum {
	dark = 'dark',
	light = 'light',
}
/**主题map，方便在主题切换组件中取值 */
export const themeModeMap = new Map<string, string>([
	[themeModeEnum.dark, '深色主题'],
	[themeModeEnum.light, '亮色主题'],
]);
/**
 * 设置样式属性
 * @param key 样式名
 * @param value  样式值
 */
export function setStyleProperty(key: string, value: string) {
	document.getElementsByTagName('body')[0].style.setProperty(key, value);
}
/**
 * 从缓存或默认json样式配置中全局设置样式变量
 */
export const initTheme = () => {
	const theme = themeStore();
	themeChange(theme.isDark ? themeModeEnum.dark : themeModeEnum.light, false);
	setThmemeColor();
};
/**
 * 更改主题色和浅色变量
 */
export const setThmemeColor = () => {
	const theme = themeStore();
	setStyleProperty('--el-color-primary', theme.customColor);
	setStyleProperty('--el-color-primary-light', changeColorOpacity(theme.customColor));
};
/**
 * 切换主题模式
 * @param mode 主题模式
 * @param electronChange 窗口是否需要同步修改 默认需要
 */
export function themeChange(mode: string, electronChange = true) {
	// app状态管理
	const theme = themeStore();
	// 设置主题状态
	theme.changeValue<boolean>('isDark', mode == 'light' ? false : true);
	// 取到对应主题的json配置
	let themeConfig;
	switch (mode) {
		case themeModeEnum.dark:
			themeConfig = themeDarkConfig;
			break;
		// 补充任意个自定义主题色.......
		default:
			themeConfig = themeLightConfig;
			break;
	}

	// 取到所有样式的key 和 value
	const styleKeys = Object.keys(themeConfig);
	const styleValues = Object.values(themeConfig);

	// 遍历设置全局scss变量的样式
	for (let i = 0; i < styleKeys.length; i++) {
		const styleKey = styleKeys[i];
		/// 走缓存或json配置的默认值
		const styleValue = styleValues[i];
		/// 设置样式
		setStyleProperty(styleKey, styleValue as string);
	}
}
